<template>

		<view class="p-2">
				   <view class="flex align-center justify-between">
					   <view class="flex align-center"> 
						<view><image class="border-circle" @click="openSelf" :src="info.avatar" style="width: 65rpx;height: 65rpx;"lazy-load></image></view>
						<view class="ml-2">
							<view class="font">{{info.userName}}</view>
							 <text class="font-sm text-light-muted">{{info.createTime}}</text>
						</view>
						</view>
						<view class="flex align-center justify-center rounded bg-main text-white animated" 
						style="width:90rpx;height:50rpx;" hover-class="pulse">
								<text  v-if="!info.flag" @click="joinEvent(info.eventId)">加入</text>
								<text  v-else-if="this.loginStatus && info.flag" @click="exitEvent(info.eventId)">退出</text>
						</view>
				   </view>
				
				   <view style="font-size: 30rpx;margin: 10rpx;" >
				   		{{info.theme}}   
				   </view>
				   <image class="rounded w-100 my-2" v-if="info.picture" :src="info.picture" ></image>
				 
				   		<view class="flex align-left  flex-1 my-3 " >
							<text class="iconfont icon-huabanfuben ">活动计划人数：</text>
							<text>{{info.personNumber}} </text>
							</view>
							
							<view class="flex align-left  flex-1 my-3 " >
							<text class="iconfont icon-didian ">活动地点：</text>
							<text>{{info.location}} </text>
							</view>
							
							<view class="flex align-left  flex-1 my-2 " >
							
							<text class="iconfont icon-leimupinleifenleileibie ">活动类型：</text>
							<text >{{info.type}} </text>
							</view>
					        <view class="flex align-left  flex-1 my-3 " >
					        
					        <text class="iconfont icon-shijian">活动开始时间：</text>
					        <text >{{info.eventStartTime}} </text>
					        </view>
							<view class="flex align-left  flex-1 my-3 " >
							
							<text class="iconfont icon-shijian ">活动结束时间：</text>
							<text >{{info.eventEndTime}} </text>
							</view>
							<view class="flex align-left  flex-1 my-2 " >
							
							<text class="iconfont icon-feiyong ">活动费用：</text>
							<text >{{info.money}}/人 </text>
							</view>
							<view class="flex align-left  flex-1 my-3 " >
							
							<text class="iconfont icon-canyurenshu ">已参加人数：</text>
							<text >{{info.joined}} </text>
							</view>
							<view class="flex align-left  flex-1 my-3 " >
							<text class="iconfont icon-zhuangtai ">活动状态：</text>
							<text >{{info.status}} </text>
							</view>
							
						 </view>
				
	
</template>

<script>
	import { mapState } from 'vuex';
	export default {
         
		data() {
			
			return {
			  info:{
				  eventId:'',
				  avatar:'',
				  userName:'',
				  createTime:'',
				  theme:'',
				  picture:'',
				  personNumber:'',
				  location:'',
				  type:'',
				  status:'',
				  joined:'',
				  money:'',
				  eventStartTime:'',
				  eventEndTime:'',
				  flag:'',
				  createId:''
			  }	
			}
		},
		onLoad(e) {
			this.initInfo(JSON.parse(e.detail));
			
		},
		computed:{
			...mapState({
				loginStatus:state=>state.loginStatus
			})
		},
		onNavigationBarButtonTap(e) {
		   if(e.index == 0)
		   { 
			   let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
			 if(this.loginStatus && this.info.createId == userInfo.userId ) {
			 uni.showActionSheet({
			     itemList: ['修改','删除'],
			     success:(res) =>{
			 		if(res.tapIndex==0)
					{
						uni.navigateTo({
							url:'../../event-edit/event-edit?id='+this.info.eventId
						})
					}else if(res.tapIndex==1){
						uni.showModal({
							content:'确定删除该活动吗？',
							confirmText:'删除',
							cancelText:'取消',
							success: (res) => {
								if(res.confirm)
								{
									this.$R.delete("/meet/event/"+this.info.eventId).then((res)=>{
										if(res.code == 200){
										   uni.showToast({
										   	 title:res.msg,
											 icon:'none'
										   })	
										   	uni.$emit('updateIndex')
											uni.navigateBack({
												delta:1
											})
										}
									})
								}
							}
						})
					}
			     }
			 });
			 }
	       }
		},
		methods: {
			initInfo(data)
			{
				this.info={
					avatar:data.sysUser.avatar,
					userName:data.sysUser.username,
					createTime:data.createTime,
					theme:data.theme,
					picture:data.picture,
					personNumber:data.personNumber,
					location:data.location,
					type:data.type,
					status:data.status,
					joined:data.joined,
					money:data.money,
					eventStartTime:data.eventStartTime,
					eventEndTime:data.eventEndTime,
					eventId:data.eventId,
					flag:data.flag,
					createId:data.createId
				}
		    },
			joinEvent(e){
				if(this.loginStatus)
				{
					this.$R.post('/meet/event/join',{eventId:e}).then(res=>{
					
							uni.showToast({
								title:'加入成功',
								icon:'none'
							})
							uni.$emit('updateIndex')
							uni.navigateBack({
								delta:1
							})
					})
				}else{
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
				}
			},
			exitEvent(e){
				this.$R.post('/meet/event/exit',{eventId:e}).then(res=>{
					
						uni.showToast({
							title:'退出成功',
							icon:'none'
						})
						uni.$emit('updateIndex')
						uni.navigateBack({
							delta:1
						})
					
				})
			},
	},
	}
</script>

<style>

</style>
